在webpack基础上使用vuejs基础功能

前言（前置环境配置）

本文章基于的项目的目录结构以及初始化npm，初始化webpack环境等前置内容，请参考这篇文章：传送门

step 1 安装vue

运行npm i vue
先检查不使用.vue文件时项目运行情况，排除其它可能的干扰。
修改./src/index.html文件如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Document</title>
</head>

<body>
    <h1>Index</h1>
    <div id="app">
        {{msg}}
    </div>
</body>

</html>

修改入口文件entry.js如下

import './css/index.css'
import './js/index.js'

在./js/index.js中增加相关配置

/**
 * import Vue from 'vue' 所默认导入的Vue组件其实是不全的,或者对于刚开始学习和练习的人来说是不全的
 * 所以这里实际上引用的是./node_modules/vue/dist/vue.js 其中./node_modules按语法可省略
 */
import Vue from 'vue/dist/vue.js'

var app = new Vue({
    el:'#app',
    data:{
        msg:'测试'
    }
})

使用npm run dev打开网站，能在页面上看到对应的文本“测试”，则说明至此为止项目一切配置正常。

step 2 安装解析.vue的loader

显然，Vue.js还没有像.css和图片资源，字体资源那样统一前端界与普及，所以我们应该首先考虑Vue官方是否提供了在Webpack下使用Vue的信息。因此，我们以 .vue site:vuejs.org 进行搜索
搜素结果中的第一个在阅览后便给出了我们想要的答案：传送门
切换到左侧目录中的起步-手动设置章节，按照官方文档进行操作。

安装：npm install -D vue-loader vue-template-compiler

按照官方文档引入配置，在我们的项目中完成配置后配置文件webpack.config.js应当如下：

const path = require("path"); //路径管理模块,使用它可以高效获取项目路径,避免路径错误.

//导入html-webpack-plugin以便之后配置
var htmlWebpackPlugin = require("html-webpack-plugin");

//为开启热部署引入webpack模块
const webpack = require("webpack");

//引入.vue支持
const VueLoaderPlugin = require('vue-loader/lib/plugin')

/**
 * 在这个对象中配置webpack的运行参数
 */
var config = {
  //指定集成引入资源的入口js文件
  entry: path.join(__dirname, "./src/entry.js"),
  //webpack处理后输出的文件的配置
  output: {
    path: path.join(__dirname, "./dist"), //指定输出的目录
    filename: "bundle.js" //输出的文件的文件名
  },
  module: {
    rules: [
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      { test: /\.(jpg|jpeg|png|gif)$/, use: "url-loader" },
      { test: /\.(woff|woff2|ttf|eot|svg)$/, use: "url-loader" },

      //为.vue添加解析
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  //配置webpack-dev-server的运行参数
  devServer: {
    open: true, //运行后自动打开浏览器
    port: 3000, //启动的服务器的监听端口
    //contentBase: path.join(__dirname, "./src"), //指定托管的网站文件的根目录
    hot: true //启用热更新
  },
  //用来引入webpack的插件
  plugins: [
    //引入html-webpack-plugin插件 这里的htmlWebpackPlugin是第四行require进来的
    new htmlWebpackPlugin({
      //指定要被插件处理的页面
      template: path.join(__dirname, "./src/index.html"),
      //指定页面处理后的名字
      filename: "index.html"
    }),
    new webpack.HotModuleReplacementPlugin(),

    //为Vue而引入
    new VueLoaderPlugin()
  ]
};

/**
 * 向外暴露配置webpack的对象
 */
module.exports = config;

至此我们已经按照官方文档完成了vue相关loader的配置，让我们来测试是否成功吧。

创建./src/login.app，我们假装这是一个登录组件，内容如下：

<template>
  <div>
    <p>登录组件</p>
  </div>
</template>

<script>
</script>

<style>
</style>

修改./src/js/index.js文件，修改后内容如下：

import Vue from "vue/dist/vue.js";

import login from "../login.vue";

var app = new Vue({
  el: "#app",
  data: {
    msg: "测试"
  },
  render: function(createEl) {
    return createEl(login);
  }
});

保存后再去查看网页，会发现原本的“测试”文本消失了，变成了“登录组件”，意味着Vue与Webpack结合成功。

step 3 安装vue-router

官方文档：传送门。

我们希望创建如下一个简单网页来测试对vue-router的安装是否成功：在主页上有“登录”和“注册”两个按钮，点击登录展示登录组件，点击注册展示注册组件，在此过程中页面不跳转。

按照官方文档，先安装vue-router模块：npm i -S vue-router

创建VueTemplates文件夹，并在其下创建login.vue和register.vue，把它们假装是登录和注册组件。

./src/VueTemplates/login.vue
<!-- 注册组件基本相同,不再赘述 -->
<template>
  <div>
    <p>登录组件</p>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
</style>

./src/app.vue

<template>
  <div>
    <h1>App</h1>

    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>
    
    <router-view></router-view>
  </div>
</template>

<script>
//按照官方文档要求引入vue-router
import Vue from "vue/dist/vue.js";
import VueRouter from "vue-router";
Vue.use(VueRouter);

//引入我们自定义的组件
import loginT from "./VueTemplates/login.vue";
import registerT from "./VueTemplates/register.vue";

//路由控制
var router = new VueRouter({
  routes: [
    { path: "/login", component: loginT },
    { path: "/register", component: registerT }
  ]
});


export default {
    // 为app这个template模板设置路由控制
    router
};
</script>

<style scoped>
</style>

修改./src/index.js，引入app模板并将其渲染到页面上。

import Vue from 'vue/dist/vue.js'

//引入app.vue模板
import appT from '../app.vue'

var app = new Vue({
    el:'#app',
    data: {
        msg:'Vue引入测试'
    },
    //将app渲染到页面上
    render: (createEl) => {return createEl(appT)}
})

npm run dev后应该能实现我们一开始预计想要的功能。至此说明vue-router模块引用成功。

在webpack基础上使用vuejs基础功能

前言（前置环境配置）

step 1 安装vue

step 2 安装解析.vue的loader

step 3 安装vue-router

阳光号

引用和评论

Spring AOP 官方文档阅读笔记

开发插件集合

一个简易的DIY场景H5框架

Vue.js-方法与事件

webpack的入门教程

Vue 项目推荐使用这个图标库 vue-icons-plus

从零开始搭建 Vue3 组件库开发环境